<template>
  <div class="footer-link">
    <!-- 友情链接-->
    <div class="link">
      <div class="box MT">
        <div class="Practitop">
          <el-input v-model="search" size="small" class="search" placeholder="请输入名称"></el-input>
          <el-button size="small" class="Prabtn" type="primary" @click="doSearch">查询</el-button>
          <el-button size="small" class="Prabtn" type="primary" @click="search = ''">重置</el-button>
        </div>
        <div class="icon_font">
          <div class="el-icon-circle-plus-outline" @click="doAdd"></div>
          <div class="el-icon-delete" @click="doDetele"></div>
        </div>
      </div>
      <div class="tableBox">
        <div class="table">
          <el-table
            :header-cell-style="{background:'rgba(247,249,252,.5)',color:'#1F2E4D',}"
            class="tabheader"
            @selection-change="selectRow"
            :data="tableData"
            style="width: 100%"
          >
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column label="编号" type="index" width="180"></el-table-column>
            <el-table-column label="链接名称" width="180">
              <template slot-scope="scope">
                <input
                  v-if="activeId == scope.row.id"
                  type="text"
                  class="linpName"
                  v-model="scope.row.content.name"
                >
                <div v-else>{{scope.row.content.name}}</div>
              </template>
            </el-table-column>
            <el-table-column prop="url" label="链接URL" width="180">
              <template slot-scope="scope">
                <input
                  v-if="activeId  == scope.row.id"
                  type="text"
                  class="linpName"
                  v-model="scope.row.content.url"
                >
                <div v-else class="lurl">{{scope.row.content.url}}</div>
              </template>
            </el-table-column>
            <el-table-column prop="title" align="center" label="排序" width="190">
              <template slot-scope="scope">
                <input
                  v-if="activeId  == scope.row.id"
                  type="text"
                  class="linp"
                  v-model="scope.row.num"
                >
                <div v-else>{{scope.row.num}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <el-button
                  class="tableBtn"
                  v-if="activeId  == scope.row.id"
                  size="mini"
                  @click="doSave(scope.row)"
                >保存</el-button>
                <el-button class="tableBtn" v-else size="mini" @click="doEdit(scope.row.id)">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeId: -1,
      search: '',
      tableData: [],
      deleteRow: []
    }
  },
  methods: {
    initData() {
      //初始化数据
      this.lAxios({
        method: 'post',
        url: '/platform/selectStaticData.do',
        params: {
          state: '44'
        }
      }).then(res => {
        this.tableData = res.data.data['44']
        for (let i = 0; i < this.tableData.length; i++) {
          // console.log(res.data.data['44'][i])
          this.tableData[i].content = JSON.parse(res.data.data['44'][i].content)
        }
        // res.data.data['44'].forEach(item => {
        //   this.tableData.content = JSON.parse(item.content)
        // })
      })
    },
    selectRow(row) {
      //选中表格的内容
      this.deleteRow = row
    },
    doEdit(id) {
      //编辑文本框的内容
      this.activeId = id
    },
    doSave(row) {
      //保存文本框的内容
      this.activeId = -1
      this.editActive = -1
      let url = '/platform/updateStaticData.do'
      if (row.id == '') {
        url = '/platform/addStaticData.do'
      } else {
        url = '/platform/updateStaticData.do'
      }
      console.log(row)
      this.lAxios({
        method: 'post',
        url: url,
        params: {
          id: row.id,
          typeId: row.typeId,
          content: JSON.stringify(row.content),
          num: row.num
        }
      }).then(res => {
        this.initData()
      })
    },
    doAdd() {
      this.tableData.push({
        id: '',
        typeId: '44',
        num: '',
        content: { name: '', url: '' }
      })
    },
    doDetele() {
      let detele = []
      this.deleteRow.forEach(item => {
        detele.push(item.id.toString())
      })
      console.log(detele)
      this.lAxios({
        method: 'post',
        url: '/platform/deleteStaticData.do',
        params: {
          ids: detele.join()
        }
      }).then(res => {
        this.initData()
      })
    },
    doSearch() {
      //查询
      this.lAxios({
        method: 'post',
        url: '/platform/selectStaticData.do',
        params: {
          state: '44',
          content: this.search
        }
      }).then(res => {
        console.log(res.data)
        this.tableData = res.data.data['44']
        for (let i = 0; i < this.tableData.length; i++) {
          // console.log(res.data.data['44'][i])
          this.tableData[i].content = JSON.parse(res.data.data['44'][i].content)
        }
      })
    }
  },
  mounted() {
    this.initData()
  },
  components: {}
}
</script>

<style  lang="scss" scoped>
.active {
  background-color: #3377ff;
  color: white;
}

.AboutUs {
  margin-top: 90px;
}

.AboutUs .about-us {
  display: flex;
  justify-content: center;
}

.textarea {
  width: 241px;
  height: 155px;
  margin-left: 10px;
}

.box {
  display: flex;
  flex-direction: row;
}

.fontT {
  width: 280px;
  height: 33px;
  line-height: 33px;
  font-size: 10px;
  text-align: center;
  background-color: #fcf8e3;
  border-radius: 5px;
  margin-left: 203px;
  margin-top: -2px;
}

.title_bg {
  margin-top: 8px;
}

.upload {
  margin-left: 39px;
}

.box_b {
  margin-top: 10px;
}

.btn {
  width: 242px;
  margin-left: 72px;
  margin-top: 20px;
}

.ML {
  margin-left: 62px;
}

.Customer {
  width: 239px;
  height: 64px;
  margin-left: 5px;
}

.marginB {
  margin-bottom: 0px;
}

.marginT {
  margin-top: 17px;
}

.marginL {
  margin-left: 20px;
}

.save {
  margin-left: 15px;
}

.search {
  width: 239px;
}

.Prabtn {
  width: 49px;
  height: 32px;
  background-color: #3377ff;
  margin-right: 25px;
}

.MT {
  margin-top: 47px;
}

.icon_font {
  font-size: 22px;
  margin-left: 20px;
}

.icon_font > div:nth-child(1) {
  margin-right: 30px;
}

.link {
  margin-left: 50px;
}

.tableBox {
  width: 98%;
  margin-right: 1%;
}

.table {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #f7f7f7;
  margin-top: 47px;
  padding-bottom: 30px;
}

.tableBtn {
  width: 140px;
  height: 39px;
  font-size: 14px;
  color: #3377ff;
}

.linp {
  width: 25px;
  height: 25px;
  text-align: center;
}

.linpName {
  width: 140px;
  height: 25px;
}

.lurl {
  color: #3377ff;
}

/*--------------------版权备案----------------------*/
.recordUp {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  margin-left: 62px;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 158px;
  height: 158px;
  line-height: 158px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.lbtnB {
  width: 242px;
  margin-left: 79px;
  margin-top: 30px;
}

.marginT1 {
  margin-left: 30px;
}

.marginT2 {
  margin-bottom: 0;
}
</style>
